<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>心情管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="./css/sm.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/nav-bottom.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/sleepAndMood.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/chart.css">
    <link rel="stylesheet" href="./css/stylesheets/style.css">
    <script src="./js/jquery-1.7.2.min.js"></script>

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="left bar-nav-mt1 back" href="">
                <img src="./img/back.png" alt="">
            </a>
            <h2 class="title color-white">心情管理</h2>
            <a href="" class="right bar-nav-mt2 right-more">
                <img src="./img/more.png" alt="">
            </a>
            <div class="more-setting" tabindex="-1">
                <div id="triangle-up"></div>
                <div class="more-setting-div">
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-add.png" alt="">
                        <span>
                            添加成员
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content">
                        <img src="./img/right-currency.png" alt="">
                        <span>
                            通用
                        </span>
                    </a>
                    <a href="#" class="more-setting-div-content" style="border-bottom: none">
                        <img src="./img/right-share.png" alt="">
                        <span>
                            分享
                        </span>
                    </a>
                </div>
            </div>
        </header>
        <nav class="my-bar bar-tab">
            <div class="row">
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-home"></div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-mess"></div>
                        <span>消息</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-discover"></div>
                        <span>发现</span>
                    </a>
                </div>
                <div class="col-25">
                    <a class="my-tab-item" href="#">
                        <div class="icon-pic my-icon-me"></div>
                        <span>我</span>
                    </a>
                </div>
            </div>
        </nav>

        <div class="content pad-left pad-right mar-top">
            <div class="left">
                <div class="left_color">
                </div>
                <h4>&nbsp;&nbsp;最近7天心情指数</h4>
            </div>
            <div class="right">
                <div class="right_color">
                </div>
                <h4>&nbsp;&nbsp;上周心情指数</h4>
            </div>

            <div class="mychart">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div id="chart1">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div id="chart2">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination">
                        &nbsp;</div>
                </div>
            </div>

            <div class="myblock">
                <div class="content-block-title"><p>点击图标选择您此刻心情</p></div>
                <div class="row row-block">
                    <div class="col-25">
                        <a href="">
                            <img src="./img/happy.png" alt="">
                            <h3>很开心</h3>
                        </a>
                    </div>
                    <div class="col-25">
                        <a href="">
                            <img src="./img/smile.png" alt="">
                            <h3>开心</h3>
                        </a>
                    </div>
                    <div class="col-25">
                        <a href="">
                            <img src="./img/sad.png" alt="">
                            <h3>一般</h3>
                        </a>
                    </div>
                    <div class="col-25">
                        <a href="">
                            <img src="./img/cry.png" alt="">
                            <h3>不开心</h3>
                        </a>
                    </div>
                </div>
            </div>

            <div class="row row-btn1">
                <div class="col-33 btn-col-33">
                    <p><a href="#" class="button mybutton">玩小游戏</a></p>
                </div>
                <div class="col-33 btn-col-33">
                    <p><a href="#" class="button mybutton">心理咨询</a></p>
                </div>
                <div class="col-33 btn-col-33">
                    <p><a href="#" class="button mybutton">心理健康知识</a></p>
                </div>
            </div>

            <div class="mar-bottom" id="player">
                <div class="cover"></div>
                <div class="ctrl">
                    <div class="control">
                        <div class="icon-controller">
                            <div class="rewind icon"></div>
                            <div class="playback icon"></div>
                            <div class="fastforward icon"></div>
                        </div>
                        <!--音量-->
                        <!--<div class="volume right">-->
                        <!--<div class="mute icon left"></div>-->
                        <!--<div class="slider left">-->
                        <!--<div class="pace"></div>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <div class="progress">
                        <div class="slider">
                            <div class="loaded"></div>
                            <div class="pace"></div>
                        </div>
                        <!--时间-->
                        <!--<div class="timer left">0:00</div>-->
                        <div class="right">
                            <!--重复-->
                            <!--<div class="repeat icon"></div>-->
                            <div class="shuffle icon changeicon"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<script src="js/highcharts.js"></script>
<script src="js/index.js"></script>
<script src="./js/swiper.jquery.min.js"></script>
<script type='text/javascript' src='./js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='./js/sm.min.js' charset='utf-8'></script>

<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<script>$.init()</script>